<template>
  <div class="nav">
    <div>
      <keep-alive :include="['Home','Order','My']">
      <router-view></router-view>
      </keep-alive>
    </div>

    <!-- 导航栏 -->
    <div>
      <van-tabbar
        v-model="active"
        active-color="#37343b"
        inactive-color="#8d8d8d"
        route
      >
        <van-tabbar-item
          v-for="(item, index) in navdata"
          :key="index"
          :to="{ name: item.routeNames }"
        >
          <span>{{ item.title }}</span>
          <template #icon="props">
            <img :src="props.active ? item.inactiveimg : item.activeimg" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",

  data() {
    return {
      active: 0,

      navdata: [
        {
          title: "首页",
          routeNames: "Home",
          activeimg: require("../assets/nav/home.svg"),
          inactiveimg: require("../assets/nav/home_.svg"),
        },
        {
          title: "点单",
          routeNames: "Order",
          activeimg: require("../assets/nav/teawithmilk.svg"),
          inactiveimg: require("../assets/nav/teawithmilk(1).svg"),
        },
        {
          title: "订单",
          routeNames: "Arrorder",
          activeimg: require("../assets/nav/_order.svg"),
          inactiveimg: require("../assets/nav/order.svg"),
        },
        {
          title: "我的",
          routeNames: "My",
          activeimg: require("../assets/nav/my.svg"),
          inactiveimg: require("../assets/nav/my(1).svg"),
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
</style>